<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/table.css">

<link rel="stylesheet" type="text/css" href="css/demostyle.css">
</head>

<body>

<div class="demobox">
	<div class="h3">没有任何边线的表格</div>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bl-table">
        <thead>
          <tr>
            <th>表格头部</th><th>表格头部</th><th>表格头部</th><th>表格头部</th>
          </tr>+
        </thead>
        <tfoot>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
        </tfoot>
        <tbody>
          <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
          </tr>
        </tbody>
    </table>
    
    <div class="h3">只有下框线的表格</div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bl-table bl-table-li">
        <thead>
          <tr>
            <th>表格头部</th><th>表格头部</th><th>表格头部</th><th>表格头部</th>
          </tr>
        </thead>
        <tfoot>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
        </tfoot>
        <tbody>
          <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
          </tr>
        </tbody>
    </table>
    
    <div class="h3">只有外框线的表格</div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bl-table bl-table-brdli">
        <thead>
          <tr>
            <th>表格头部</th><th>表格头部</th><th>表格头部</th><th>表格头部</th>
          </tr>
        </thead>
        <tfoot>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
        </tfoot>
        <tbody>
          <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
          </tr>
        </tbody>
    </table>
    
    <div class="h3">边框线表格</div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bl-table bl-table-brd">
        <thead>
          <tr>
            <th class="checkbox"></th><th>表格头部</th><th>表格头部</th><th>表格头部</th><th>表格头部</th>
          </tr>
        </thead>
        <tfoot>
        	<td class="checkbox"><input name="checkbox1" type="checkbox"/></td>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
            <td>总计单元格</td>
        </tfoot>
        <tbody>
          <tr>
          	<td class="checkbox"><input name="checkbox2" type="checkbox"/></td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
          </tr>
          <tr class="tdeven">
          	<td class="checkbox"><input name="checkbox3" type="checkbox"/></td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
          </tr>
          <tr>
          	<td class="checkbox"><input name="checkbox4" type="checkbox"/></td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
          </tr>
        </tbody>
    </table>
    <div class="fn-tr tfoot">
    	<div class="fn-fl">
        	<label><input name="checkboxall" type="checkbox" class="allselect"/>全选</label>
            <label><input name="checkboxinvert" type="checkbox" class="invertselect"/>反选</label>
        </div>
        <div class="bl-pagelist bl-pagelist-small"><a>上一页</a><a>1</a><a>2</a><a>...</a><a>15</a><a>下一页</a></div>
    </div>
    
    
    
</div>


</body>
</html>
